<!--  -->
<template>
  <div class="box">
    <div class="box-item">
      <el-tree :props="props" :load="loadNode" lazy accordion @node-click="getNode"> </el-tree>
    </div>
    <div>
      <el-table :data="tableData">
        <el-table-column prop="province" label="省份" width="180"> </el-table-column>
        <el-table-column prop="name" label="学校" width="180"> </el-table-column>
        <el-table-column prop="insType" label="类别" width="200"> </el-table-column>
        <el-table-column prop="insCharacter" label="性质" width="200"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { queryUpSub, getType, getFie, getCollages } from '@/api/major/major'
import { major } from '@/data/mock/major.js'
export default {
  data() {
    return {
      major,
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      },
      tableData: []
    }
  },
  methods: {

    getNode(v, node) {
      // console.log(node)

      if (node.level == 3) {
        getCollages({
          name: node.data.name
        }).then(res => {
          this.tableData = res.data
        })
        // console.log(node.data.name)
      }
      // getCollages()
    },
    loadNode(node, resolve) {
      // console.log(node)
      let data = []
      //1级
      if (node.level === 0) {
        queryUpSub().then(res => {
          res.data.forEach(item => data.push({ name: item }))
          return resolve(data)
        })
      }
      //2级
      if (node.level == 1) {
        getType({
          upSub: node.data.name
        }).then(res => {
          res.data.forEach(item => data.push({ name: item }))
          return resolve(data)
        })
      }
      if (node.level == 2) {
        getFie({
          type: node.data.name
        }).then(res => {
          // console.log(item)
          res.data.forEach(item => data.push({ name: item, leaf: true }))
          return resolve(data)
        })
      }
    }
  }
}
</script>

<style scoped>
.box {
  display: flex;
  justify-content: center;
}
.box-item {
  margin-top: 50px;
  margin-right: 100px;
}
</style>
